<template>
    <div class="menus_wrapper" v-if="menusList">
        <div class="menus_body" @mouseleave="handleMouseleave">
            <!-- 推荐模块 -->
            <div class="menus">
                <div
                    class="menu_item"
                    v-for="(item, index) in menusList"
                    :key="index"
                    :class="{active: index === currentMenus}"
                    @mouseover="handleMouseover(index)"
                >
                    <p>{{ item.type }}</p>
                    <i class="el-icon-arrow-right"></i>
                </div>
            </div>
            <!-- 推荐列表 -->
            <div class="sub_menus" v-if="showMenus">
                <ul>
                    <li v-for="(item, index) in menusList[currentMenus].children" :key="index">
                        <a @click="Trriger(item.city)">
                            <i>{{ index + 1 }}</i>
                            <b>{{ item.city }}</b>
                            <span>{{ item.desc }}</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
   data() {
        return {
            // 城市菜单列表
            menusList: null,
            // 当前城市菜单
            currentMenus: "",
            showMenus: false,
            // 文章列表
            postList: []
        };
    },
    async created() {
        // 获取城市菜单列表
        let res = await this.$axios.get("/posts/cities");
        this.menusList = res.data.data;

        // 获取城市列表
        let res1 = await this.$axios.get("/posts");
        this.postList = res.data;

    },
    methods: {
        // 鼠标移入菜单项
        handleMouseover(index) {
            this.currentMenus = index;
            this.showMenus = true;
        },
        // 鼠标移开菜单项
        handleMouseleave() {
            this.showMenus = false;
            this.currentMenus = "";
        },
        //触发父组件里面的函数
    Trriger(val) {
    //   console.log(val);
      this.$emit("triggerSeach", val);
    },
    },
};
</script>

<style lang="less" scoped>
.menus_wrapper {
            background-color: #fff;
            width: 260px;
            .menus_body {
                position: relative;
                .menus {
                    .menu_item {
                        position: relative;
                        display: flex;
                        padding: 0 20px;
                        height: 40px;
                        align-items: center;
                        justify-content: space-between;
                        border: 1px solid #ccc;
                        border-top: 0;
                        font-size: 14px;
                        margin-right: -1px;
                        z-index: 2;
                        &:first-child {
                            border-top: 1px solid #ccc;
                        }
                        &.active {
                            border-right-color: #fff;
                            color: orange;
                        }
                    }
                }
                .sub_menus {
                    position: absolute;
                    left: 260px;
                    top: 0;
                    width: 350px;
                    padding: 10px 20px;
                    background-color: #fff;
                    border: 1px solid #ccc;
                    z-index: 1;
                    li {
                        a {
                            display: flex;
                            align-items: center;
                            i {
                                font-size: 24px;
                                color: orange;
                                font-style: italic;
                            }
                            b {
                                font-weight: normal;
                                font-size: 16px;
                                color: orange;
                                margin: 0 10px;
                                &:hover {
                                    text-decoration: underline;
                                }
                            }
                            span {
                                font-size: 14px;
                                color: #999;
                                &:hover {
                                    text-decoration: underline;
                                }
                            }
                        }
                    }
                }
            }
}
</style>